<template>
  <div class="container">
    <h3>数字类型校验</h3>
    <el-form inline :model="formModel" :rules="rules" ref='form'>
      <el-row>
        <el-col>
          <el-form-item prop="age" label="年龄">
            <!-- type="number" .number -->
            <el-input  v-model="formModel.age"></el-input>

          </el-form-item>
          <el-form-item label="age数据类型：">
            <span> {{typeof formModel.age}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <div>
        <el-button type='primary' @click='submit'>提交</el-button>
        <span>表单校验 结果---》 {{isValidate}}</span>
      </div>
    </el-form>

    <el-card>
      <div slot="header">数据回填</div>
      <div>
        <el-button type="primary" @click="fillData">随机填入一个数据，模拟接口回填数据</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  name: "validatorNumber",
  data () {
    return {
      rules: {
        age: [
          // type: "number"
          { required: true, message: "请输入数字", trigger: ["blur", "change"] }
        ]
      },
      formModel: {
        age: ""
      },
      isValidate: false
    };
  },
  mounted () {
    this.fillData()
  },
  methods: {
    fillData () {
      // 随机填入, 有的后台开发在没有值的情况下会返回 null

      const m = Math.random() * 100

      this.formModel.age = m
    },
    async submit () {
      // this.$refs['form'].validate((valid) => {
      //   this.isValidate = valid
      // })

      try {
        const res = await this.$refs['form'].validate()

        console.log(res)
      } catch (e) {
        // 校验不通过
        console.log('e', e)
      }
    }
  }
};
</script>
